---
import Layout from '../../layouts/Layout.astro';
import ProductCard from '../../components/ProductCard.astro';
import PriceComparisonTable from '../../components/PriceComparisonTable.tsx';
import PriceHistoryChart from '../../components/PriceHistoryChart.tsx';
import { getProductBySlug, getProductsFromDB, getBrandBySlugFromDB } from '../../lib/products';

function getDiscountPercent(sneaker: { originalPrice: number; lowestPrice: number }): number {
  return Math.round(((sneaker.originalPrice - sneaker.lowestPrice) / sneaker.originalPrice) * 100);
}

const { slug } = Astro.params;
const sneaker = await getProductBySlug(slug!);
if (!sneaker) return Astro.redirect('/sneakers');
const discount = getDiscountPercent(sneaker);
const related = await getProductsFromDB({ limit: 4, brand: sneaker.brandSlug });
const brandInfo = await getBrandBySlugFromDB(sneaker.brandSlug);

const viewItemData = {
  item_id: sneaker.id,
  item_name: `${sneaker.brand} ${sneaker.name}`,
  item_brand: sneaker.brand,
  price: sneaker.lowestPrice,
  item_category: sneaker.name,
};
const schema = {
  "@context": "https://schema.org",
  "@type": "Product",
  name: `${sneaker.brand} ${sneaker.name}`,
  description: `${sneaker.brand} ${sneaker.name} - ${sneaker.colorway}`,
  brand: { "@type": "Brand", name: sneaker.brand },
  offers: {
    "@type": "AggregateOffer",
    lowPrice: sneaker.lowestPrice,
    highPrice: Math.max(...sneaker.offers.map(o => o.price)),
    priceCurrency: "EUR",
    offerCount: sneaker.offers.length,
  },
};
---

<Layout title={`${sneaker.brand} ${sneaker.name} — SneakerPicks`} ogImage={sneaker.image} description={`Vergelijk prijzen voor de ${sneaker.brand} ${sneaker.name} (${sneaker.colorway}). Vanaf €${sneaker.lowestPrice.toFixed(2)}.`}>
  <script type="application/ld+json" set:html={JSON.stringify(schema)} />

  <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
    <!-- Breadcrumb -->
    <nav class="mb-8 text-sm text-text-muted" aria-label="Breadcrumb">
      <a href="/" class="hover:text-accent">Home</a>
      <span class="mx-2">/</span>
      <a href="/sneakers" class="hover:text-accent">Sneakers</a>
      <span class="mx-2">/</span>
      <a href={`/merken/${sneaker.brandSlug}`} class="hover:text-accent">{sneaker.brand}</a>
      <span class="mx-2">/</span>
      <span class="text-text">{sneaker.name}</span>
    </nav>

    <div class="grid gap-12 lg:grid-cols-2">
      <!-- Image -->
      <div class="relative overflow-hidden rounded-3xl border border-border/50 bg-bg-card">
        {discount > 0 && (
          <div class="absolute left-4 top-4 z-10 rounded-full bg-deal px-3 py-1.5 text-sm font-bold text-white">
            -{discount}%
          </div>
        )}
        <div class="aspect-square p-8 sm:p-12">
          <img
            src={sneaker.image}
            alt={`${sneaker.brand} ${sneaker.name}`}
            class="h-full w-full object-contain"
          />
        </div>
      </div>

      <!-- Info -->
      <div>
        <div class="flex items-center gap-2">
          {brandInfo?.logo_url && (
            <img src={brandInfo.logo_url} alt={sneaker.brand} class="brand-logo h-5 w-auto object-contain" />
          )}
          <p class="text-xs font-bold uppercase tracking-[0.2em] text-accent">{sneaker.brand}</p>
        </div>
        <h1 class="mt-2 text-3xl font-black tracking-tight sm:text-4xl">{sneaker.name}</h1>
        <p class="mt-2 text-text-secondary">{sneaker.colorway}</p>

        <div class="mt-6 flex items-baseline gap-3">
          <span class="text-3xl font-black text-accent">€{sneaker.lowestPrice.toFixed(2).replace('.', ',')}</span>
          {sneaker.originalPrice > sneaker.lowestPrice && (
            <span class="text-lg text-text-muted line-through">€{sneaker.originalPrice.toFixed(2).replace('.', ',')}</span>
          )}
        </div>

        <div class="mt-2 text-sm text-text-muted">
          Laagste prijs bij {sneaker.offers.sort((a, b) => a.price - b.price)[0].shop}
        </div>

        <!-- Meta -->
        <div class="mt-6 flex flex-wrap gap-3">
          <span class="rounded-xl bg-bg-elevated px-3 py-1.5 text-xs font-bold text-text-secondary">
            {sneaker.gender === 'heren' ? '👨 Heren' : sneaker.gender === 'dames' ? '👩 Dames' : '🧑 Unisex'}
          </span>
          <span class="rounded-xl bg-bg-elevated px-3 py-1.5 text-xs font-bold text-text-secondary">
            📅 {new Date(sneaker.releaseDate).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })}
          </span>
          <span class="rounded-xl bg-bg-elevated px-3 py-1.5 text-xs font-bold text-text-secondary">
            {sneaker.offers.filter(o => o.inStock).length} shops op voorraad
          </span>
        </div>

        <!-- Price alert -->
        <button class="mt-8 flex w-full items-center justify-center gap-2 rounded-2xl border-2 border-accent/30 bg-accent/10 py-3.5 text-sm font-bold text-accent transition-all hover:border-accent hover:bg-accent/20">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
          Prijsalert instellen
        </button>
      </div>
    </div>

    <!-- Price comparison -->
    <div class="mt-12">
      <PriceComparisonTable client:load offers={sneaker.offers} lowestPrice={sneaker.lowestPrice} sneakerData={viewItemData} />
    </div>

    <!-- Price history -->
    <div class="mt-12 rounded-2xl border border-border/50 bg-bg-card p-6">
      <PriceHistoryChart client:load data={sneaker.priceHistory} />
    </div>

    <!-- Available sizes -->
    <div class="mt-12">
      <h3 class="mb-4 text-sm font-bold uppercase tracking-widest text-text-muted">Beschikbare maten</h3>
      <div class="flex flex-wrap gap-2">
        {sneaker.sizes.map(size => {
          const available = sneaker.offers.some(o => o.inStock && o.sizes.includes(size));
          return (
            <span class:list={[
              'rounded-xl border px-3.5 py-2 text-sm font-bold transition-colors',
              available
                ? 'border-border/50 bg-bg-card text-text hover:border-accent/50'
                : 'border-border/20 text-text-muted/40'
            ]}>
              EU {size}
            </span>
          );
        })}
      </div>
    </div>

    <!-- Related -->
    {related.length > 0 && (
      <div class="mt-16">
        <h2 class="mb-6 text-2xl font-black tracking-tight">Meer van {sneaker.brand}</h2>
        <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-4">
          {related.map((s, i) => (
            <ProductCard sneaker={s} index={i} />
          ))}
        </div>
      </div>
    )}
  </section>
  <script is:inline define:vars={{ viewItemData }}>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      event: 'view_item',
      ecommerce: { items: [viewItemData] }
    });
  </script>
</Layout>

<style>
  .brand-logo {
    filter: brightness(0);
  }
  :global(.dark) .brand-logo {
    filter: brightness(0) invert(1);
  }
</style>